<template>
	<view class="gender-page">
		<!-- 增强的粒子背景效果 -->
		<view class="particle" v-for="n in 30" :key="n" :style="{
      left: `${Math.random() * 100}%`,
      top: `${Math.random() * 100}%`,
      width: `${Math.random() * 12 + 3}px`,
      height: `${Math.random() * 12 + 3}px`,
      animationDelay: `${Math.random() * 5}s`,
      animationDuration: `${Math.random() * 10 + 10}s`,
      backgroundColor: selectedGender ? 
        (selectedGender === 'male' ? 'rgba(64, 150, 255, 0.2)' : 
         selectedGender === 'female' ? 'rgba(255, 125, 187, 0.2)' : 
         'rgba(114, 124, 245, 0.2)') : 
        'rgba(150, 150, 150, 0.15)'
    }"></view>

		<!-- 页面容器 -->
		<view class="container">
			<!-- 标题区域 - 距离顶部80rpx -->
			<view class="header">
				<text class="main-title">{{ $t('genderSelect.pageTitle') }}</text>
				<text class="sub-title">{{ $t('genderSelect.pageSubtitle') }}</text>
			</view>

			<!-- 性别选择卡片区域 -->
			<view class="gender-cards">
				<!-- 男性选项 -->
				<view v-for="(item,index) in sexList" class="gender-card"
					:class="{ selected: selectedGender === item.code}" @click="selectGender(item.code)">
					<view class="icon-container" :class="item.class">
						<u-icon :name="item.icon" size="30" color="#fff"></u-icon>
					</view>
					<view class="gender-name">{{ item.name }}</view>
					<view class="check-indicator" v-if="selectedGender === item.code">
						<u-icon name="checkbox-mark" size="22" color="#fff"></u-icon>
					</view>
				</view>

			</view>

			<!-- 重置选择按钮 -->
			<view class="reset-btn" v-if="selectedGender" @click="resetSelection">
				<u-icon name="close-circle" size="26" color="#909399"></u-icon>
				<text class="reset-text">{{ $t('genderSelect.resetBtn') }}</text>
			</view>

			<!-- 信息说明卡片 - 与卡片宽度协调 -->
			<view class="info-card">
				<view class="info-icon">
					<u-icon name="info-circle" size="26" color="#4096ff"></u-icon>
				</view>
				<view class="info-content">
					<text class="info-title">{{ $t('genderSelect.infoCard.title') }}</text>
					<text class="info-desc">
						{{ $t('genderSelect.infoCard.desc') }}
					</text>
				</view>
			</view>

			<!-- 确认按钮 - 修复边框和图标颜色 -->
			<button v-if="parentType == '2'" class="confirm-btn" :class="{ active: selectedGender }"
				:disabled="!selectedGender" @click="confirmSelection">
				{{ $t('genderSelect.confirmBtn.confirm') }}
				<u-icon name="arrow-right" size="18" :color="selectedGender ? '#fff' : '#909399'"
					class="btn-icon"></u-icon>
			</button>
			<button v-else class="confirm-btn" :class="{ active: selectedGender }" :disabled="!selectedGender"
				@click="confirmSelection">
				{{ $t('genderSelect.confirmBtn.continue') }}
				<u-icon name="arrow-right" size="18" :color="selectedGender ? '#fff' : '#909399'"
					class="btn-icon"></u-icon>
			</button>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				selectedGender: '', // 存储选中的性别
				parentType: ""
			};
		},
		computed: {
			// 性别列表改为computed，确保国际化翻译生效（data中无法直接访问this.$t）
			sexList() {
				return [
					{
						name: this.$t('genderSelect.gender.male'),
						code: "male",
						id: 1,
						icon: "man",
						class: "male-color",
					},
					{
						name: this.$t('genderSelect.gender.female'),
						code: "female",
						id: 2,
						icon: "woman",
						class: "female-color",
					},
					{
						name: this.$t('genderSelect.gender.other'),
						code: "other",
						id: 3,
						icon: "question-circle",
						class: "other-color",
					}
				];
			}
		},
		onLoad(param) {
			this.parentType = param.type;
		},
		methods: {
			// 选择性别
			selectGender(gender) {
				// 添加选择时的震动反馈
				uni.vibrateShort({
					type: 'light'
				});
				this.selectedGender = gender;

				// 找到当前选中的性别项并存储
				const selectedItem = this.sexList.find(item => item.code === gender);
				if (selectedItem) {
					uni.setStorageSync("USERNORMALSEXSQLKEY", JSON.stringify(selectedItem));
				}
			},

			// 重置选择
			resetSelection() {
				uni.vibrateShort({
					type: 'light'
				});
				this.selectedGender = '';
			},

			// 确认选择
			confirmSelection() {
				// 国际化翻译选中的性别文本
				const genderText = this.$t(`genderSelect.gender.${this.selectedGender}`);
				console.log('选中的性别：', genderText);

				if (this.parentType == '2') {
					uni.$emit("backSexView");
					uni.navigateBack();
				} else {
					uni.navigateTo({
						url: '/pages/mainTab/index'
					});
				}
			}
		}
	};
</script>

<style scoped>
	/* 样式部分无改动，保持原代码 */
	.gender-page {
		position: relative;
		width: 100%;
		min-height: 100vh;
		background: linear-gradient(135deg, #f5f7fa 0%, #e4eaf1 100%);
		overflow: hidden;
	}

	.particle {
		position: absolute;
		border-radius: 50%;
		animation: float linear infinite;
		z-index: 1;
		opacity: 0.7;
	}

	@keyframes float {
		0% {
			transform: translateY(0) translateX(0);
		}

		25% {
			transform: translateY(-30px) translateX(15px);
		}

		50% {
			transform: translateY(-60px) translateX(0);
		}

		75% {
			transform: translateY(-30px) translateX(-15px);
		}

		100% {
			transform: translateY(0) translateX(0);
		}
	}

	.container {
		position: relative;
		z-index: 2;
		padding: 0 40rpx;
		display: flex;
		flex-direction: column;
		align-items: center;
	}

	.header {
		text-align: center;
		margin: 160rpx 0 70rpx;
		animation: fadeInUp 0.8s ease-out;
		width: 100%;
	}

	.main-title {
		font-size: 48rpx;
		font-weight: 700;
		color: #303133;
		display: block;
		margin-bottom: 20rpx;
	}

	.sub-title {
		font-size: 28rpx;
		color: #606266;
		line-height: 1.5;
	}

	.gender-cards {
		display: flex;
		justify-content: space-around;
		width: 100%;
		margin-bottom: 40rpx;
	}

	.gender-card {
		width: 190rpx;
		height: 270rpx;
		background-color: #fff;
		border-radius: 24rpx;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		position: relative;
		box-shadow: 0 8rpx 24rpx rgba(0, 0, 0, 0.08);
		transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
		overflow: hidden;
		cursor: pointer;
	}

	.gender-card::before {
		content: '';
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 6rpx;
		background-color: transparent;
		transition: all 0.3s ease;
	}

	.gender-card.selected {
		transform: translateY(-15rpx) scale(1.05);
		box-shadow: 0 16rpx 32rpx rgba(0, 0, 0, 0.12);
	}

	.gender-card.selected::before {
		height: 100%;
		opacity: 0.1;
	}

	.icon-container {
		width: 110rpx;
		height: 110rpx;
		border-radius: 50%;
		display: flex;
		align-items: center;
		justify-content: center;
		margin-bottom: 25rpx;
		box-shadow: 0 8rpx 16rpx rgba(0, 0, 0, 0.1);
		transition: all 0.3s ease;
		position: relative;
		z-index: 1;
	}

	.gender-card.selected .icon-container {
		transform: scale(1.1);
		box-shadow: 0 12rpx 24rpx rgba(0, 0, 0, 0.15);
	}

	.male-color {
		background: linear-gradient(135deg, #4096ff 0%, #6aaeff 100%);
	}

	.female-color {
		background: linear-gradient(135deg, #ff7dbb 0%, #ff9ac2 100%);
	}

	.other-color {
		background: linear-gradient(135deg, #727cf5 0%, #8690e8 100%);
	}

	.gender-card.selected.male-color::before {
		background-color: #4096ff;
	}

	.gender-card.selected.female-color::before {
		background-color: #ff7dbb;
	}

	.gender-card.selected.other-color::before {
		background-color: #727cf5;
	}

	.gender-name {
		font-size: 32rpx;
		font-weight: 600;
		color: #303133;
		transition: all 0.3s ease;
	}

	.gender-card.selected .gender-name {
		transform: translateY(5rpx);
	}

	.check-indicator {
		position: absolute;
		top: -5rpx;
		right: -5rpx;
		width: 50rpx;
		height: 50rpx;
		border-radius: 50%;
		background-color: #52c41a;
		display: flex;
		align-items: center;
		justify-content: center;
		box-shadow: 0 4rpx 12rpx rgba(82, 196, 26, 0.4);
		animation: bounceIn 0.5s cubic-bezier(0.215, 0.61, 0.355, 1);
	}

	@keyframes bounceIn {
		0% {
			transform: scale(0);
			opacity: 0;
		}

		60% {
			transform: scale(1.2);
			opacity: 1;
		}

		100% {
			transform: scale(1);
		}
	}

	.reset-btn {
		display: flex;
		align-items: center;
		margin-bottom: 60rpx;
		color: #909399;
		font-size: 26rpx;
		cursor: pointer;
		transition: all 0.2s ease;
		padding: 10rpx 20rpx;
		border-radius: 20rpx;
	}

	.reset-btn:hover {
		background-color: rgba(0, 0, 0, 0.03);
	}

	.reset-text {
		margin-left: 10rpx;
	}

	.info-card {
		width: 100%;
		background-color: #fff;
		border-radius: 20rpx;
		padding: 25rpx;
		box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.05);
		margin-bottom: 60rpx;
		display: flex;
		align-items: flex-start;
		animation: fadeInUp 0.8s ease-out 0.2s both;
		box-sizing: border-box;
	}

	.info-icon {
		margin-right: 20rpx;
		margin-top: 3rpx;
		min-width: 30rpx;
	}

	.info-content {
		flex: 1;
	}

	.info-title {
		font-size: 28rpx;
		font-weight: 600;
		color: #303133;
		display: block;
		margin-bottom: 10rpx;
	}

	.info-desc {
		font-size: 24rpx;
		color: #606266;
		line-height: 1.6;
	}

	.confirm-btn {
		width: 100%;
		height: 100rpx;
		line-height: 100rpx;
		background-color: #f0f2f5;
		color: #909399;
		border-radius: 50rpx;
		font-size: 32rpx;
		font-weight: 600;
		display: flex;
		align-items: center;
		justify-content: center;
		transition: all 0.3s ease;
		animation: fadeInUp 0.8s ease-out 0.4s both;
		box-sizing: border-box;
	}

	.confirm-btn.active {
		background: linear-gradient(90deg, #4096ff 0%, #6aaeff 100%);
		color: #fff;
		box-shadow: 0 8rpx 24rpx rgba(64, 150, 255, 0.3);
		border-color: transparent;
	}

	uni-button:after {
		border: 0px solid rgba(0, 0, 0, .2);
	}

	.confirm-btn.active:active {
		transform: scale(0.98);
		box-shadow: 0 4rpx 12rpx rgba(64, 150, 255, 0.2);
	}

	.btn-icon {
		margin-left: 12rpx;
		transition: transform 0.3s ease;
	}

	.confirm-btn.active:active .btn-icon {
		transform: translateX(5rpx);
	}

	@keyframes fadeInUp {
		from {
			opacity: 0;
			transform: translateY(30rpx);
		}

		to {
			opacity: 1;
			transform: translateY(0);
		}
	}
</style>